<template>
  <div class="page_report">
    <div style="width: 1000px;margin: auto;">
      <div style="text-align: center;font-size: 20px;color: #2d8cf0;margin-top: 50px;margin-bottom: 20px;">学员
        【王小二】运动分析报告
      </div>
      <Collapse v-model="collapseName">
        <Panel name="baseInfo">
          运动基本信息
          <p slot="content">
            <Row class="form-row">
              <Col span="6" class="form_filed">运动开始时间：</Col>
              <Col span="6" class="form_filed_val">2020-04-20 14:33:22</Col>
              <Col span="6" class="form_filed">运动结束时间：</Col>
              <Col span="6" class="form_filed_val">2020-04-20 14:43:22</Col>
            </Row>
          </p>
        </Panel>
        <Panel name="plan">
          运动课程
          <div slot="content">
            <Row class="form-row">
              <Col span="6" class="form_filed">运动课程：</Col>
              <Col span="6" class="form_filed_val">王小二三月塑身课程</Col>
              <Col span="6" class="form_filed">课程制定教练：</Col>
              <Col span="6" class="form_filed_val">马花腾</Col>
            </Row>
            <Row class="form-row">
              <Col span="6" class="form_filed">训练目标-力量：</Col>
              <Col span="6" class="form_filed_val">200（单位待定）</Col>
              <Col span="6" class="form_filed">训练目标-速度：</Col>
              <Col span="6" class="form_filed_val">300（单位待定）</Col>
            </Row>
            <Row class="form-row">
              <Col span="6" class="form_filed">训练目标-速率：</Col>
              <Col span="6" class="form_filed_val">400（单位待定）</Col>
            </Row>
          </div>
        </Panel>
        <Panel name="rate">
          速度
          <div slot="content" style="min-height: 350px">
            <div ref="rate" style="height: 300px;"></div>
          </div>
        </Panel>
        <Panel name="power">
          力量
          <div slot="content" style="min-height: 350px">
            <div ref="power" style="height: 300px;"></div>
          </div>
        </Panel>
        <Panel name="function" style="min-height: 350px">
          功率
          <div slot="content">
            <div ref="function" style="height: 300px;"></div>
          </div>
        </Panel>
        <Panel name="total">
          总结
          <div slot="content" style="min-height: 350px">
            <div ref="radar" style="height: 300px;"></div>

            <div
              style="color: red;margin-top: 20px;font-size: 16px;font-weight: bolder;margin-bottom: 40px;text-align: center">
              再接再厉！您本次运动指标未达到运动课程要求！
            </div>


          </div>
        </Panel>
      </Collapse>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: "page_report",
    components: {},
    data() {
      return {
        collapseName: ['baseInfo', 'plan', 'rate', 'power', 'function', 'total'],
        rateDom: null,
        powerDom: null,
        functionDom: null,
        rateData: [],
        powerData: [],
        fuctionData: [],
        radarDom: null
      }
    },
    mounted() {
      //随机数据
      for (var i = 0; i < 10; i++) {
        const val1 = this.randomNum(60, 200)
        const val2 = this.randomNum(90, 300)
        const val3 = this.randomNum(120, 400)
        this.rateData.push(val1)
        this.powerData.push(val2)
        this.fuctionData.push(val3)
      }
      const that = this
      setTimeout(function () {
        that.initRateChart()
        that.initPowerChart()
        that.initFunctionChart()
        that.initRadar()
      }, 1000)
    },
    methods: {
      randomNum(min, max) {
        var range = max - min;
        var random = Math.random();
        var num = min + Math.round(random * range); //四舍五入
        return num;
      },
      pageChg(selPage) {
      },
      //速度
      initRateChart() {
        const option = {
          legend: {
            data: ['实时速度图'],
            top: 0
          },
          color: ['#2d8cf0'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            top: 20,
            left: '1.2%',
            right: '1%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['14:33:00', '14:34:00', '14:35:00', '14:36:00', '14:37:00', '14:38:00', '14:39:00', '14:40:00', '14:41:00', '14:42:00']
            }
          ],
          yAxis: [
            {
              type: 'value',
            }
          ],
          series: [
            {
              name: '实时速度图',
              type: 'line',
              stack: '总量',
              areaStyle: {
                normal: {
                  color: '#2d8cf0'
                }
              },
              data: this.rateData
            }
          ]
        }
        this.$nextTick(() => {
          console.log("正在初始化11")
          this.rateDom = echarts.init(this.$refs.rate)
          console.log("正在初始化22")
          this.rateDom.setOption(option)
        })
      },
      //力量
      initPowerChart() {
        const option = {
          legend: {
            data: ['实时力量图'],
            top: 0
          },
          color: ['#4608A6'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            top: 20,
            left: '1.2%',
            right: '1%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['14:33:00', '14:34:00', '14:35:00', '14:36:00', '14:37:00', '14:38:00', '14:39:00', '14:40:00', '14:41:00', '14:42:00']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '实时力量图',
              type: 'line',
              stack: '总量',
              areaStyle: {
                normal: {
                  color: '#4608A6'
                }
              },
              data: this.powerData
            }
          ]
        }
        this.$nextTick(() => {
          this.powerDom = echarts.init(this.$refs.power)
          this.powerDom.setOption(option)
        })
      },
      //功率
      initFunctionChart() {
        const option = {
          legend: {
            data: ['实时功率图'],
            top: 0
          },
          color: ['#398DBF'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            top: 20,
            left: '1.2%',
            right: '1%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['14:33:00', '14:34:00', '14:35:00', '14:36:00', '14:37:00', '14:38:00', '14:39:00', '14:40:00', '14:41:00', '14:42:00']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '实时功率图',
              type: 'line',
              stack: '总量',
              areaStyle: {
                normal: {
                  color: '#398DBF'
                }
              },
              data: this.fuctionData
            }
          ]
        }
        this.functionDom = echarts.init(this.$refs.function)
        this.functionDom.setOption(option)
      },
      initRadar() {
        const option = {
          color: ['#2d8cf0'],
          legend: {
            data: ['综合评价'],
            top: 0
          },
          grid: {
            top: 100,
            left: '1.2%',
            right: '1%',
            bottom: '3%',
          },
          radar: [
            {
              indicator: [
                {text: '速度', max: 200},
                {text: '力量', max: 300},
                {text: '功率', max: 400},
                {text: '时长', max: 120},
                {text: '总功', max: 2000}
              ],
              center: ['50%', '50%'],
              radius: 90,
              startAngle: 90,
              splitNumber: 4,
              shape: 'circle',
              name: {
                formatter: '【{value}】',
                textStyle: {
                  color: '#72ACD1'
                }
              },
              splitArea: {
                areaStyle: {
                  color: ['rgba(114, 172, 209, 0.2)',
                    'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                    'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                  shadowColor: 'rgba(0, 0, 0, 0.3)',
                  shadowBlur: 10
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              }
            }
          ],
          series: [
            {
              name: '雷达图',
              type: 'radar',
              emphasis: {
                lineStyle: {
                  width: 4
                }
              },
              data: [
                {
                  value: [188, 222, 170, 10, 234],
                  name: '综合评价',
                  symbol: 'rect',
                  symbolSize: 5,
                  lineStyle: {
                    type: 'dashed'
                  }
                }
              ]
            }
          ]
        }
        this.$nextTick(() => {
          this.rateDom = echarts.init(this.$refs.radar)
          this.rateDom.setOption(option)
        })
      }
    }
  }
</script>
<style>
  html, body {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
